/**
  @date: 2019年4月15日 14:00
  @latest updates: 2019年6月29日10:41:51
  @author: liump
  @desc: 高德地图二次开发,打点划线
  
  数据结构: /api/web/web/pro/budget/work/submit
       data = 
      {
        details: [ // 工作明细
          {
            at_point: 0, // 工作点，垂直作业使用
            end_point: 0, // 结束点，水平作业使用
            start_point: 0, // 起始点, 水平作业使用
            work_direction: 0, // 工作方向 0.水平 1.垂直
            work_length: 0, // 工作长度
            work_option: "string", // 工作选项id
            work_type: 0, // 1.管道 2.线路 3.设备 4.溶纤 5.跳纤
            workload: 0 // workload (integer, optional): 重复次数
          }
        ],
        points: [ // 地图打点集合
          {
            distance: 0,
            id: 2,
            lat: 0,
            lng: 0,
            prev: 1
          }
        ],
        pro_id: "string" // 项目id
        pro_lng: [123, 30] // 项目对应的经纬度
      };
  
 */
<template>
  <div class="component-amap">
    <!-- header budget Start -->
    <amap-header></amap-header>
    <!-- header budget End and amap Start -->
    <div class="amap">
      <!-- header(pro_name, btns) Start -->
      <div class="header">
        <div class="h-pro-name">
          当前项目:
          {{this.pro_name}}
        </div>
        <div class="h-content">
          <div
            :class="['h-title', changeToolsIndex == index?'active':'']"
            v-for="(item, index) of headerBtns"
            :key="index"
            @click="handleChangeTools(index)"
          >{{item}}</div>
        </div>
      </div>
      <!-- header(pro_name, btns) End and main Start -->
      <div class="main">
        <!-- address search Start -->
        <div class="search">
          <el-form ref="formSearchLnglat" :model="formSearchLnglat" @submit.native.prevent>
            <el-form-item>
              <el-input
                v-model="formSearchLnglat.searchText"
                placeholder="请输入地址或经纬度"
                @keyup.enter.native="handleSearch"
              >
                <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- address search End -->
        <!-- amap -->
        <div id="amap" :class="[{cursor_white: this.showLayer},{cursor_red: !this.showLayer}]"></div>
        <div class="create-pro" v-show="showCreate" @click="handleShowCreateMenu">
          <img src="static/amap/create.png">
          <span>选择项目</span>
        </div>
        <div class="create-menu" v-show="showCreateMenu">
          <div class="create-menu-header">
            <div>选择项目</div>
          </div>
          <div class="create-menu-main">
            <el-table
              ref="singleTable"
              :data="proData"
              height="240"
              highlight-current-row
              @current-change="handleCurrentChangePro"
              style="cursor:pointer;"
              @cell-click="getProId"
            >
              <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
              <!-- <el-table-column
                type="index"
                width="50"
                label="序号"
                align="center"
                :index="getProListIndex"
              ></el-table-column>-->
              <el-table-column property="pro_num" label="项目编号" align="center" width="100"></el-table-column>
              <el-table-column property="pro_name" label="项目名称" align="center" width="260"></el-table-column>
              <el-table-column property="pro_lnglat" label="项目经纬度" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="create-menu-footer">
            <el-button type="primary" @click="createMenuConfirm">确定</el-button>
          </div>
        </div>
        <!-- show all table data Start -->
        <div class="showAllTableData" v-show="changeToolsIndex == 4">
          <el-button type="primary" @click="handleShowAllTable">
            <span v-show="!this.showAmapAllTable">查看总工作量</span>
            <span v-show="this.showAmapAllTable">返回熔纤工作量</span>
          </el-button>
        </div>
        <!-- show all table data End -->
        <div class="choiceLayer">
          <el-button type="primary" @click="handleChoiceLayer">
            <span v-show="this.showLayer">切换到普通地图</span>
            <span v-show="!this.showLayer">切换到参照物地图</span>
          </el-button>
        </div>
        <!-- pipeline work dialog Start -->
        <transition name="el-zoom-in-bottom">
          <amap-pipeline-work-dialog
            v-show="showAmapPipeline"
            :point_id="point_id"
            :changeToolsIndex="changeToolsIndex"
            ref="childPipeline"
            @handlePipelineWorkConfirm="handlePipelineWorkConfirm"
            @handlePipelineWorkCancel="handlePipelineWorkCancel"
          ></amap-pipeline-work-dialog>
        </transition>
        <!-- pipeline work dialog End -->
        <!-- line work dialog Start -->
        <transition name="el-zoom-in-bottom">
          <amap-line-work-dialog
            v-show="showAmapLine"
            :point_id="point_id"
            :changeToolsIndex="changeToolsIndex"
            ref="childLine"
            @handleLineWorkConfirm="handleLineWorkConfirm"
            @handleLineWorkCancel="handleLineWorkCancel"
          ></amap-line-work-dialog>
        </transition>

        <transition name="el-zoom-in-bottom">
          <amap-line-table-add-work-dialog
            :lineList="lineList"
            :lineStart="lineStart"
            :lineEnd="lineEnd"
            :distanceList="distanceList"
            ref="childLineAddWork"
            @handleLineAddWorkConfirm="handleLineAddWorkConfirm"
            @handleLineAddWorkCancel="handleLineAddWorkCancel"
            v-show="showAmapLineAddWork"
          ></amap-line-table-add-work-dialog>
        </transition>
        <!-- line work dialog End -->
        <transition name="el-zoom-in-bottom">
          <amap-equipment-work-dialog
            v-show="showAmapEquipment"
            :point_id="point_id"
            ref="childEquipment"
            @handleEquipmentWorkCancel="handleEquipmentWorkCancel"
            @handleEquipmentWorkConfirm="handleEquipmentWorkConfirm"
          ></amap-equipment-work-dialog>
        </transition>
        <!-- melt work dialog Start -->
        <transition name="el-zoom-in-bottom">
          <amap-melt-work-dialog
            v-show="showAmapMelt"
            :point_id="point_id"
            ref="childMelt"
            @handleMeltWorkConfirm="handleMeltWorkConfirm"
            @handleMeltWorkCancel="handleMeltWorkCancel"
          ></amap-melt-work-dialog>
        </transition>
        <!-- melt work dialog End -->
        <!-- marker icon detail Start -->
        <amap-marker-icon-detail></amap-marker-icon-detail>
        <!-- marker icon detail End -->
      </div>
      <!-- main End -->
    </div>
    <!-- amap End and show messages Start -->
    <amap-line-table
      v-show="changeToolsIndex == 2"
      :lineTableData="lineTableData"
      @handleSpliceLineWork="handleSpliceLineWork"
      @handleShowLineAddWork="handleShowLineAddWork"
    ></amap-line-table>
    <amap-equipment-table
      v-show="changeToolsIndex == 3"
      :equipmentTableData="equipmentTableData"
      @handleDeleteEquipmentData="handleDeleteEquipmentData"
    ></amap-equipment-table>
    <amap-melt-table
      v-show="changeToolsIndex == 4 && !showAmapAllTable"
      :meltTableData="meltTableData"
      @handleDeleteMeltData="handleDeleteMeltData"
    ></amap-melt-table>
    <amap-all-table
      v-show="changeToolsIndex == 4 && showAmapAllTable"
      ref="childAllTable"
      @handleUpdateData="handleUpdateData"
    ></amap-all-table>
    <amap-assessment ref="childAssessment"></amap-assessment>
  </div>
</template>

<script>
import AMap from 'AMap' //在使用地图的页面引入该组件
import amapHeader from './components/amapHeader'
import amapPipelineWorkDialog from './components/dialog/amapPipelineWorkDialog'

import amapLineWorkDialog from './components/dialog/amapLineWorkDialog'
import amapLineTableAddWorkDialog from './components/tableAddWorkDialog/amapLineTableAddWorkDialog'

import amapEquipmentWorkDialog from './components/dialog/amapEquipmentWorkDialog'

import amapMeltWorkDialog from './components/dialog/amapMeltWorkDialog'

import amapMarkerIconDetail from './components/amapMarkerIconDetail'

import amapLineTable from './components/table/amapLineTable'
import amapEquipmentTable from './components/table/amapEquipmentTable'
import amapMeltTable from './components/table/amapMeltTable'
import amapAllTable from './components/table/amapAllTable'
import amapAssessment from './components/assessment/amapAssessment'

export default {
  name: 'amap',
  components: {
    amapHeader,
    amapPipelineWorkDialog,
    // 光缆相关
    amapLineWorkDialog,
    amapLineTableAddWorkDialog,

    amapEquipmentWorkDialog,

    amapMeltWorkDialog,

    amapMarkerIconDetail,

    amapLineTable,
    amapEquipmentTable,
    amapMeltTable,
    amapAllTable,
    amapAssessment
  },
  data() {
    return {
      headerBtns: ['测距画线', '管道', '线路', '设备', '熔纤'], // 按钮组名称
      changeToolsIndex: null, // 是否选中对应功能,改变背景色
      proData: [], // 项目列表数组
      pro_id: '', // 项目编号
      pro_name: '', // 项目名称
      currentRow: null, // 项目列表切换行
      showCreate: true, // 地图第一次加载时创建项目的按钮显示
      showCreateMenu: false, // 创建项目按钮显示后项目展示菜单

      amap: null, // 地图对象初始化
      satelliteLayer: null, // 卫星图层初始化
      setAMapLnglat: [],
      contextMenu: new AMap.ContextMenu(), // 消息菜单对象初始化,使用在点标记鼠标右键
      marker: new AMap.Marker(), // 点标记对象初始化
      markers: [], // 存储 marker 对象的数组
      path: [], // 线段对象数据
      distanceList: [], // 用于用户绘制后存储
      polyline: null, // 线段对象初始化
      id: 1, // 当前节点编号
      prev: 0, // 当前节点的上一个节点编号
      point_lnglat: [], // 当前节点经纬度
      prev_point_lnglat: [], // 上一个节点的经纬度
      mockPath: [], // 临时绘线数组
      mockPolyline: {}, // 临时绘线的类
      mockPolylineLength: 0, // 临时绘线的距离
      mockText: {}, // 临时绘线测距提示框
      formSearchLnglat: {
        searchText: '' // 搜索框文本
      },
      lineList: [],

      pipelineTableData: [], // 管道的数据
      lineTableData: [], // 线路的数据
      equipmentTableData: [], // 设备的数据
      meltTableData: [], // 熔纤的数据
      // data: { details: [], points: [], pro_id: "" }, // 提交总数据
      work_option: '', // 工作内容三级联动最后一个内容的ID

      // 按钮组弹框控制
      point_id: 0, // 对 marker 操作时记录操作点
      point_distance: 0, // 对 marker 操作时记录测距

      showAmapPipeline: false, // 控制 管道安装 弹框的工作内容
      pipelineDialogConfirm: false, // 管道安装 dialog 确认情况
      pipelineWork_list: '', // 工作内容文本
      img_type: '', // 图片类型

      // marker title
      gj_index: 0, // 光交
      gf_index: 0, // 光分
      jth_index: 0, // 接头盒
      ys_index: 0, // 引上
      yx_index: 0, // 引下
      qbjg_index: 0, // 墙壁架挂

      lnglatText: '', // 经纬度
      lineStart: {
        tag: '',
        point: 0
      }, // 光缆工作内容弹框回显起点
      lineEnd: {
        tag: '',
        point: 0
      }, // 光缆工作内容弹框回显终点

      showAmapLine: false, // 控制 敷设光缆 弹框的工作内容
      showAmapLineAddWork: false, // 是否显示 光缆工作内容弹框
      lineDialogConfirm: false, // 敷设光缆 dialog 确认情况

      showAmapEquipment: false, // 设备弹框的控制

      showAmapMelt: false, // 控制 熔纤 弹框的工作内容
      meltDialogConfirm: false, // 熔纤 dialog 确认情况

      showAmapAllTable: false, // 总工作量表格的显示控制

      showLayer: true // 卫星图层按钮切换控制,默认是卫星图层
    }
  },
  watch: {
    /**
     * 监听 管道安装 dialog 的确认情况,如果选择确认按钮更换 marker 的图片,如果是取消不改变
     */
    pipelineDialogConfirm(val, old) {
      if (val) {
        let content = ''
        content += `<div class='marker-amap'>`
        switch (this.img_type) {
          case 'D-ODG':
            content += `<img src='/static/amap/d_odg.png'>`
            break
          case 'D-NDG':
            content += `<img src='/static/amap/d_ndg.png'>`
            break
          case 'D-CDG':
            content += `<img src='/static/amap/d_cdg.png'>`
            break
          default:
            content += `<img src='/static/amap/expansion_point.png'>`
            break
        }

        content += `<!-- <div>${this.lnglatText}</div> -->
          </div>`

        this.markers[this.point_id - 1].setContent(content)
        this.pipelineDialogConfirm = false
      }
    },
    /**
     * 监听 敷设光缆 dialog 的确认情况,如果选择确认按钮更换 marker 的图片,如果是取消不改变
     */
    lineDialogConfirm(val, old) {
      let content = ''
      content += `<div class='marker-amap'>`
      // TODO: watch线路
      switch (this.img_type) {
        case 'D-OGJ':
          content += `<img src='/static/amap/d_ogj.png'>`
          content += `<div>GJ${this.gj_index}</div>`
          break
        case 'D-NGJ':
          content += `<img src='/static/amap/d_ngj.png'>`
          content += `<div>GJ${this.gj_index}</div>`
          break
        case 'D-OGF':
          content += `<img src='/static/amap/d_ogf.png'>`
          content += `<div>GF${this.gf_index}</div>`
          break
        case 'D-NGF':
          content += `<img src='/static/amap/d_ngf.png'>`
          content += `<div>GF${this.gf_index}</div>`
          break
        case 'W-JTH':
          content += `<img src='/static/amap/w_njth.png'>`
          content += `<div>JTH${this.jth_index}</div>`
          break
        case 'W-PN':
          content += `<img src='/static/amap/w_pn.png'>`
          break
        case 'W-YS':
          content += `<img src='/static/amap/w_ys.png'>`
          content += `<div>YS${this.ys_index}</div>`
          break
        case 'W-YX':
          content += `<img src='/static/amap/w_yx.png'>`
          content += `<div>YX${this.yx_index}</div>`
          break
        case 'W-NQBJG':
          content += `<img src='/static/amap/w_nqbjg.png'>`
          content += `<div>JG${this.qbjg_index}</div>`
          break
        case 'W-OQBJG':
          content += `<img src='/static/amap/w_oqbjg.png'>`
          content += `<div>JG${this.qbjg_index}</div>`
          break
        default:
          content += `<img src='/static/amap/expansion_point.png'>`
          break
      }

      content += `</div>`

      this.markers[this.point_id - 1].setContent(content)
      this.lineDialogConfirm = false
    }
  },
  mounted() {
    this.getProList()
    this.init()
  },
  methods: {
    /**
     * amap 页面初始化函数,初始化地图,初始化工具库,修改鼠标样式,添加地图点击事件
     * @method init
     * @author liump
     */
    init() {
      // 地图实例化
      this.handleAMapInit()

      // 调用地图工具库
      this.handleAMapPlugin()

      // 修改鼠标样式
      // this.amap.setDefaultCursor("crosshair");

      // 注册地图鼠标右键点击事件
      this.handleAMapOnRightclick()

      // 注册鼠标移动获取经纬度事件
      this.handleAMapOnMousemove()
    },
    /**
     * 该方法在地图加载后创建项目的点击事件
     * @method handleShowCreateMenu
     * @author liump
     */
    handleShowCreateMenu() {
      this.showCreate = false
      this.showCreateMenu = true
    },
    /**
     * AMap 地图初始化方法
     * @method handleAMapInit
     * @author liump
     */
    handleAMapInit() {
      this.amap = new AMap.Map('amap', {
        resizeEnable: true,
        expandZoomRange: true,
        zoom: 18,
        zooms: [3, 20]
      })
      // 挂载卫星地图图层(显示楼/绿化/路)
      this.satelliteLayer = new AMap.TileLayer.Satellite()
      this.amap.add(this.satelliteLayer)
    },
    /**
     * 该方法用于控制地图功能
     * @method handleChangeTools
     * @author liump
     * @param { Number } index 0-4对应按钮功能"测距画线", "管道安装", "敷设光缆", "放置设备", "熔纤"
     */
    handleChangeTools(index) {
      this.changeToolsIndex = index
      // 每次切换关闭菜单
      this.contextMenu.close(this.amap)
      // 当类型为测距画线时开启节点拖拽功能,其他功能类型关闭拖拽事件
      if (index) {
        this.handleAMapOffClick()
        this.handleAMapOffRightclick()
        this.markers.forEach(el => {
          el.setDraggable(false)
        })
      } else {
        this.handleAMapOnClick()
        this.handleAMapOnRightclick()
        this.markers.forEach(el => {
          el.setDraggable(true)
        })
      }
      switch (index) {
        case 2:
          this.showAmapMelt = false
          this.showAmapEquipment = false
          break
        case 3:
          this.showAmapLine = false
          this.showAmapMelt = false
          break
        case 4:
          this.showAmapLine = false
          this.showAmapEquipment = false
          break
        default:
          break
      }
    },
    /**
     * 该方法调用了 AMap 地图工具库,缩放标尺,位移圆钮
     * @method handleAMapPlugin
     * @author liump
     */
    handleAMapPlugin() {
      // 调用地图工具库
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
        // 调用地图工具,缩放标尺,位移圆钮
        this.amap.addControl(new AMap.ToolBar())
        this.amap.addControl(new AMap.Scale())
      })
    },
    /**
     * 该方法注册了地图左键点击事件
     * @method handleAMapOnClick
     * @author liump
     */
    handleAMapOnClick() {
      this.amap.on('click', this.handleAMapLeftClick)
    },
    /**
     * 该方法关闭了地图左键点击事件
     * @method handleAMapOffClick
     * @author liump
     */
    handleAMapOffClick() {
      this.amap.off('click', this.handleAMapLeftClick)
    },
    /**
     * 地图鼠标左键单击事件
     * @method handleAMapLeftClick
     * @author liump
     * @param { Object } e 当前元素对象
     */
    handleAMapLeftClick(e) {
      // 为地图注册click事件获取鼠标点击出的经纬度坐标 e.lnglat.getLng() e.lnglat.getLat()
      let lng = e.lnglat.getLng()
      let lat = e.lnglat.getLat()
      let lnglat = [lng, lat]
      // 每次点击都将当前节点经纬度当成上一个节点经纬度
      this.prev_point_lnglat = this.point_lnglat

      // 添加信息,更新数据
      this.updateData(lnglat, this.id, this.prev)
      // 折线路径清空(容错)
      this.path = []
      // 折线渲染
      this.handleShowLine(this.distanceList, lnglat)
    },
    /**
     *  开启地图右键单击事件
     * @method handleAMapOnRightclick
     * @author liump
     */
    handleAMapOnRightclick() {
      this.amap.on('rightclick', this.hanldeAMapRightClick)
    },
    /**
     *  关闭地图右键单击事件
     * @method handleAMapOffRightclick
     * @author liump
     */
    handleAMapOffRightclick() {
      this.amap.off('rightclick', this.hanldeAMapRightClick)
    },
    /**
     * 地图右键单击事件
     * @method hanldeAMapRightClick
     * @author liump
     */
    hanldeAMapRightClick(e) {
      // 创建右键菜单
      this.contextMenu.close(this.amap)
      this.contextMenu = new AMap.ContextMenu()
      this.contextMenu.addItem(
        '继续绘图',
        e => {
          this.handleAMapOnClick()
          this.handleAMapOnMousemove()
        },
        0
      )
      // 右键结束绘图
      this.contextMenu.addItem(
        '结束绘图',
        e => {
          this.handleAMapOffClick()
          this.handleAMapOffMousemove()
        },
        0
      )
      // 打开菜单
      this.contextMenu.open(this.amap, e.lnglat)
    },
    /**
     * 开启鼠标移动事件的方法
     * @method handleAMapOnMousemove
     * @author liump
     */
    handleAMapOnMousemove() {
      this.amap.on('mousemove', this.handleAMapMousemove)
    },
    /**
     * 关闭鼠标移动事件的方法
     * @method handleAMapOffMousemove
     * @author liump
     */
    handleAMapOffMousemove() {
      this.amap.off('mousemove', this.handleAMapMousemove)
      // 移除虚拟画线
      this.amap.remove(this.mockPolyline)
      // 移除虚拟
      this.amap.remove(this.mockText)
    },
    /**
     * 鼠标移动触发获取经纬度事件
     * @method handleAMapMousemove
     * @author liump
     * @param { Object } e 当前事件触发对象
     */
    handleAMapMousemove(e) {
      // e.lnglat // 鼠标移动时当前的经纬度,将移动时获取的经纬度当成当前节点经纬度
      this.point_lnglat = [e.lnglat.lng, e.lnglat.lat]
      // 如果当前节点经纬度与上一节点经纬度存在就虚拟画线
      if (this.prev_point_lnglat[0] && this.point_lnglat[0]) {
        this.handleAMapMousemoveShowLine()
      }
    },
    /**
     * 鼠标移动后画线，虚拟画线
     * @method handleAMapMousemoveShowLine
     * @author liump
     */
    handleAMapMousemoveShowLine() {
      // 虚拟画线前先移除之前的虚拟画线的折线和文本对象并将path清空
      this.amap.remove(this.mockPolyline)
      this.amap.remove(this.mockText)
      this.mockPath = []
      // 虚拟画线路径
      this.mockPath.push(this.prev_point_lnglat, this.point_lnglat)
      // 虚拟画线折线对象
      this.mockPolyline = new AMap.Polyline({
        path: this.mockPath,
        strokeColor: '#65f7cd', // 线条颜色
        lineJoin: 'round', // 折线拐点连接处样式
        bubble: true
      })
      // 获取虚拟画线线段的长度(测距)
      this.mockPolylineLength = parseInt(this.mockPolyline.getLength())
      // 虚拟画线测距信息框
      this.mockText = new AMap.Text({
        text: this.mockPolylineLength + '米',
        position: this.point_lnglat,
        anchor: 'bottom-left',
        bubble: true
      })
      // 地图添加测距信息框
      this.amap.add(this.mockText)
      // 将折线添加至地图实例
      this.amap.add(this.mockPolyline)
    },
    /**
     * 该方法通过传递过来的数据渲染页面
     * @method handleShowLine
     * @author liump
     * @param data 用于遍历的数组
     */
    handleShowLine(data, lnglat) {
      // 根据传递过来的数据渲染页面
      // 对数组遍历,需要注意:
      // 1. 第一个点为起始点
      // 2. 每2个点绘制一个线段
      this.handleAddMarker(data, lnglat)
      this.handleAddLine(data)
    },
    /**
     * 该方法是添加地图点标记函数,在点标记上点击右键可以开始绘制新的分支路线
     * @method handleAddMarker
     * @author liump
     * @param { Array } data 遍历的节点数组
     * @param { Array } lnglat 节点经纬度
     */
    handleAddMarker(data, lnglat) {
      let id = 0
      let dt = 0
      let tag = ''
      let pointType = ''
      // 遍历数组,找到经纬度对应的 id distance
      data.forEach(el => {
        if (el.lng == lnglat[0] && el.lat == lnglat[1]) {
          id = el.id
          dt = el.distance
          tag = el.tag
          pointType = el.pointType
        }
      })
      let lnglatText = lnglat.join(',')
      this.lnglatText = lnglatText

      // marker
      let content = ''

      content += `<div class='marker-amap'>`
      //  TODO marker 在重绘后判断是否更换过图标
      switch (pointType) {
        case 'D-OGJ':
          content += `<img src='/static/amap/d_ogj.png'>`
          content += `<div>${tag}</div>`
          break
        case 'D-NGJ':
          content += `<img src='/static/amap/d_ngj.png'>`
          content += `<div>${tag}</div>`
          break
        case 'D-OGF':
          content += `<img src='/static/amap/d_ogf.png'>`
          content += `<div>${tag}</div>`
          break
        case 'D-NGF':
          content += `<img src='/static/amap/d_ngf.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-JTH':
          content += `<img src='/static/amap/w_njth.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-PN':
          content += `<img src='/static/amap/w_pn.png'>`
          break
        case 'W-YS':
          content += `<img src='/static/amap/w_ys.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-YX':
          content += `<img src='/static/amap/w_yx.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-NQBJG':
          content += `<img src='/static/amap/w_nqbjg.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-OQBJG':
          content += `<img src='/static/amap/w_oqbjg.png'>`
          content += `<div>${tag}</div>`
          break
        default:
          content += `<img src='/static/amap/point.png'>`
          break
      }
      content += `</div>`

      this.marker = new AMap.Marker({
        position: lnglat,
        draggable: true,
        offset: new AMap.Pixel(-15, -15),
        content: content
      })
      // 设置多个点标记
      this.marker.setMap(this.amap)
      // 保存所有的 marker 集合,在对点操作的时候可以找到指定的 marker 对象
      this.markers.push(this.marker)

      this.marker.on('dragend', e => {
        // 鼠标位置的经纬度
        let lng = e.lnglat.lng
        let lat = e.lnglat.lat
        let obj = this.distanceList[id - 1]
        obj.lng = lng
        obj.lat = lat
        if (this.distanceList.length > 1) {
          this.handleDistance()
        }

        this.markers = []

        this.amap.clearMap()
        this.path = []

        // 循环绘制点
        this.distanceList.forEach(el => {
          this.handleAddMarker(this.distanceList, [el.lng, el.lat])
        })
        // 绘制线
        this.handleAddLine(this.distanceList)
      })

      // 点标记绑定鼠标右击事件,根据功能的不同显示不同的菜单
      this.marker.on('rightclick', e => {
        // lnglat 为当前事件点经纬度
        this.contextMenu.close(this.amap)

        // 创建右键菜单
        this.contextMenu = new AMap.ContextMenu()

        // 右键创建分支线路
        // 当功能选择为 测距画线 changeToolsIndex == 0 的时候可以显示 继续画图 / 结束画图 / 删除节点的菜单

        if (this.changeToolsIndex == 0) {
          this.contextMenu.addItem('继续画图', e => {
            this.handleAMapOnClick()
            this.handleAMapOnMousemove()
            this.prev_point_lnglat = lnglat
            this.distanceList.forEach(el => {
              if (el.lng == lnglat[0] && el.lat == lnglat[1]) {
                this.prev = el.id
              }
            })
          })
          this.contextMenu.addItem('结束绘图', e => {
            this.handleAMapOffClick()
            this.handleAMapOffMousemove()
          })
          this.contextMenu.addItem('删除节点', e => {
            // 遍历数据根据 lnglat 找到指定的元素删掉所有数据
            let len = this.distanceList.length
            let i
            for (let index = 0; index < len; index++) {
              const elem = this.distanceList[index]
              if (elem.lng == lnglat[0] && elem.lat == lnglat[1]) {
                i = index
                this.id = elem.id
                this.prev = elem.prev
                break
              }
            }

            let de_arr = this.distanceList.splice(i)
            // TODO: 删除节点后应该遍历节点数组,取出 GJ GF JTH的序列号并找到最大值并在全局中赋值
            let gj_index_list = []
            let gf_index_list = []
            let jth_index_list = []
            this.distanceList.forEach(el => {
              let gj_i = el.tag.indexOf('GJ')
              if (gj_i > -1) {
                gj_index_list.push(el.tag)
              }
              let gf_i = el.tag.indexOf('GF')
              if (gf_i > -1) {
                gf_index_list.push(el.tag)
              }
              let jth_i = el.tag.indexOf('JTH')
              if (jth_i > -1) {
                jth_index_list.push(el.tag)
              }
            })
            // 数组倒序
            gj_index_list.sort((a, b) => b - a)
            gf_index_list.sort((a, b) => b - a)
            jth_index_list.sort((a, b) => b - a)
            // 对全局序列重赋值
            if (gj_index_list[0]) {
              this.gj_index = gj_index_list[0].slice(2)
            }
            if (gf_index_list[0]) {
              this.gf_index = gf_index_list[0].slice(2)
            }
            if (jth_index_list[0]) {
              this.jth_index = jth_index_list[0].slice(3)
            }

            // TODO: 在重定义序列后需要删除对应表格的信息
            let de_fun = (list, id) => {
              list.forEach((elem, index) => {
                if (
                  elem.at_point == id ||
                  elem.start_point == id ||
                  elem.end_point == id
                ) {
                  list.splice(index, 1)
                }
              })
            }
            // 删除表格数据中的关联被删除节点的数据
            de_arr.forEach(el => {
              de_fun(this.lineTableData, el.id)
              de_fun(this.equipmentTableData, el.id)
              de_fun(this.meltTableData, el.id)
            })

            // marker 数组清空
            this.markers = []

            this.amap.clearMap()
            this.path = []

            // 循环绘制点-地图重绘
            this.distanceList.forEach(el => {
              // this.handleShowLine(this.distanceList, [el.lng, el.lat]);
              this.handleAddMarker(this.distanceList, [el.lng, el.lat])
            })
            // 绘制线-地图重绘
            this.handleAddLine(this.distanceList)

            // 删除节点后,将模拟画线的上一个节点位置变为最后一个点位置
            if (this.distanceList.length > 1) {
              let prev_obj = this.distanceList[this.distanceList.length - 1]
              this.prev_point_lnglat = [prev_obj.lng, prev_obj.lat]
            } else {
              this.prev_point_lnglat = []
            }
          })
        }

        // 打开菜单
        this.contextMenu.open(this.amap, lnglat)
      })

      // 熔纤确认按钮/取消按钮,熔纤表格/总工作量表格(带切换btn)/保存按钮(调保存接口),节点经纬度的手动修改,改bug
      this.marker.on('click', e => {
        // TODO: 功能类型切换
        // lnglat 为当前事件点经纬度
        this.contextMenu.close(this.amap)

        // 创建右键菜单
        this.contextMenu = new AMap.ContextMenu()

        // 右键创建分支线路
        // 当功能选择为 测距画线 changeToolsIndex == 0 的时候可以显示 继续画图 / 结束画图 / 删除节点的菜单

        // 管道安装方法
        // let pipelineMethods = img_type => {
        //   // 控制弹框是否显示
        //   this.showAmapPipeline = true;
        //   // 当前节点编号
        //   this.point_id = id;
        //   // 当前功能类型 管道1,光缆2,设备3,熔纤4 根据按钮组的选择控制 changeToolsIndex

        //   // 当前节点测距
        //   this.point_distance = dt;

        //   // 调用子组件方法初始化数据
        //   this.$refs.childPipeline.handleInitData()

        //   // 更换图标
        //   this.$refs.childPipeline.handleChangeImg(img_type)

        //   // 将当前点放置在地图中心,这样是为了配合弹框位置
        //   this.amap.setCenter(lnglat)
        // }

        // 当功能选择为 管道安装 changeToolsIndex == 1 的时候可以显示 管道井
        // if (this.changeToolsIndex == 1) {
        //   this.contextMenu.addItem("管道井", () => {
        //     pipelineMethods("W-GDJ")
        //   })
        //   this.contextMenu.addItem("立杆", () => {
        //     pipelineMethods("W-LG")
        //   })
        //   this.contextMenu.addItem("顶管", () => {
        //     pipelineMethods("W-DG")
        //   })
        //   // // TODO: 未确定的工作事项
        //   // this.contextMenu.addItem("挖沟", () => {
        //   //   pipelineMethods("WG")
        //   // })
        //   // this.contextMenu.addItem("子管", () => {
        //   //   pipelineMethods("ZG")
        //   // })
        //   // this.contextMenu.addItem("杆路", () => {
        //   //   pipelineMethods("GL")
        //   // })
        // }

        // 光缆安装方法
        let lineMethods = pointType => {
          // 控制弹框是否显示
          this.showAmapLine = true
          // 当前节点编号
          this.point_id = id
          // 当前功能类型 管道1,光缆2,设备3,熔纤4 根据按钮组的选择控制 changeToolsIndex

          // 当前节点测距
          this.point_distance = dt

          // 调用子组件方法初始化数据
          this.$refs.childLine.handleInitData()

          // 根据点类型切换指定的点图标
          this.$refs.childLine.handleChangeImg(pointType)

          // 根据点类型切换指定的弹框内容
          this.$refs.childLine.handleChangeLineDialog(pointType)

          // 根据点类型切换指定的工作内容级联
          this.$refs.childLine.getLineWorkData(pointType)

          // 将当前点放置在地图中心,这样是为了配合弹框位置
          this.amap.setCenter(lnglat)
        }

        // 当类型为线路时
        if (this.changeToolsIndex == 2) {
          this.contextMenu.addItem('光交箱', () => {
            lineMethods('D-OGJ')
          })
          this.contextMenu.addItem('光分箱', () => {
            lineMethods('D-OGF')
          })
          this.contextMenu.addItem('接头盒', () => {
            lineMethods('W-JTH')
          })
          this.contextMenu.addItem('引上', () => {
            lineMethods('W-YS')
          })
          this.contextMenu.addItem('盘留', () => {
            lineMethods('W-PN')
          })
          // this.contextMenu.addItem('引下', () => {
          //   lineMethods('W-YX')
          // })
          // this.contextMenu.addItem('墙壁架挂', () => {
          //   lineMethods('W-QBJG')
          // })
        }

        // 当前节点tag
        let tag = this.distanceList[id - 1].tag

        // 设备方法
        let equipmentMethods = pointType => {
          // 控制弹框是否显示
          this.showAmapEquipment = true
          // 当前节点编号
          this.point_id = id
          // 当前节点经纬度 lnglat
          this.$refs.childEquipment.getLnglat(lnglat)
          this.$refs.childEquipment.getTag(tag)

          // 每次打开弹框清空数据
          this.$refs.childEquipment.handleInitData()

          // 请求级联工作内容
          this.$refs.childEquipment.getEquipmentWorkData(pointType)

          // 将当前点放置在地图中心,这样是为了配合弹框位置
          this.amap.setCenter(lnglat)
        }

        // 当类型为设备时
        if (this.changeToolsIndex == 3) {
          if (tag.indexOf('GJ') > -1 || tag.indexOf('GF') > -1) {
            this.contextMenu.addItem('分光器', () => {
              equipmentMethods('D-FGQ')
            })
          }
        }

        // 当类型为熔纤时
        if (this.changeToolsIndex == 4) {
          this.$refs.childMelt.handleDataInit()
          let meltMethods = tagType => {
            // 控制弹框是否显示
            this.showAmapMelt = true

            // 当前节点编号
            this.point_id = id
            // 根据节点编号判断当前节点是否是 GJ GF JTH,也就是遍历 distanceList 如果元素的 tagType 包含 GJ GF JTH

            // 当前节点测距
            this.point_distance = dt
            // 获取当前节点 tag
            let tag = this.distanceList[id - 1].tag
            // 根据参数请求接口找到指定的工作内容级联
            this.$refs.childMelt.handleInitData(id, tag, lnglat.join(','))
            this.$refs.childMelt.getMeltWorkData(tagType)

            // 将当前点放置在地图中心,这样是为了配合弹框位置
            this.amap.setCenter(lnglat)
          }

          // 遍历表格数组,找到 node 字段中包含 -- 的视为线程,把所有的线程数据抓出来传递给子组件
          let meltLineSelect = []
          this.lineTableData.forEach(el => {
            if (el.line.indexOf('--') > -1) {
              meltLineSelect.push(el.line)
            }
          })
          this.$refs.childMelt.handleShowLine(meltLineSelect)

          // 获取当前节点的类型,用于熔纤工作内容的判断
          let tagType = this.distanceList[id - 1].tagType
          // 当类型为 GJ GF JTH 时工作内容为 成端
          if (tagType == 'GJ' || tagType == 'GF') {
            meltMethods('W-CD')
          } else if (tagType == 'JTH') {
            // 当类型为接头盒的时工作内容为 熔接
            meltMethods('W-RJ')
          }
        }

        // 打开菜单
        this.contextMenu.open(this.amap, lnglat)
      })
    },
    /**
     * 该方法是绘线的方法,但是划线必须一条一条划线
     * @method handleAddLine
     * @param { Array } data 遍历的数组
     */
    handleAddLine(data) {
      // 遍历数据,将2个节点之间取经纬度并绘线
      for (let i = 0; i < data.length; i++) {
        let el = data[i]
        // 找到当前节点及上一个节点的经纬度
        let node = el.id // 当前节点编号
        let prevNode = el.prev // 上一个节点编号
        let nodeLnglat = [el.lng, el.lat] // 当前节点经纬度
        let distance = el.distance // 当前节点距离上一个节点的距离
        let prevLnglat // 上一个节点经纬度
        // 如果是第一个点,上一个点是0,无需测距
        if (prevNode == 0) {
          continue
        }
        // 获取上一个节点编号的经纬度
        for (let index = 0; index < data.length; index++) {
          let elem = data[index]
          if (elem.id === prevNode) {
            prevLnglat = [elem.lng, elem.lat]
          }
        }

        // 折线的绘制路径
        this.path.push(nodeLnglat, prevLnglat)
        // 折线对象
        this.polyline = new AMap.Polyline({
          path: this.path,
          strokeColor: '#1abc9c', // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        })

        // 通过当前节点和上一个节点的经纬度获取对应的 marker 对象,对象从 markers 中取
        // 第一个 marker,通过 prevLnglat -- 上一个节点经纬度获取 marker对象
        let p1
        this.markers.forEach((el, p_index) => {
          let prev_lnglat = el.getPosition()
          if (
            prev_lnglat.lng == prevLnglat[0] &&
            prev_lnglat.lat == prevLnglat[1]
          ) {
            p1 = this.markers[p_index].getPosition()
          }
        })
        // 第二个 marker
        let p2 = this.markers[i].getPosition()
        // TODO: 计算测距信息框中心点位置
        let textPos = p1.divideBy(2).add(p2.divideBy(2))
        // textPos = p1.divideBy(2).add(textPos.divideBy(2))
        // 线段中心点测距信息框
        let text = new AMap.Text({
          text: distance + '米',
          position: textPos,
          map: this.amap,
          style: {
            'background-color': '#1abc9c',
            'border-color': '#e1f5fe',
            color: '#fff',
            'font-size': '12px'
          }
        })

        // 测距信息框的注册点击事件
        text.on('click', () => {
          let obj = {
            distance,
            lnglat: [textPos.lng, textPos.lat],
            nodeLnglat, // 测距信息框所在线段的一个点经纬度
            prevLnglat // 测距信息框所在线段的另一个点经纬度
          }
          this.lineList.push(obj)

          // this.lineList 数组对象去重
          let result = []
          let _obj = {}
          for (let i = 0; i < this.lineList.length; i++) {
            if (!_obj[this.lineList[i].lnglat]) {
              result.push(this.lineList[i])
              _obj[this.lineList[i].lnglat] = true
            }
          }
          this.lineList = result

          // 点击测距信息框后获取线段2个端点的经纬度,抓出经纬度中可能出现的 GJ GF JTH,判断情况 GJ-GF / GJ-JTH / JTH-GF
          let node_obj = {} // 初始化抓出目标点的元素对象
          let node_point = 0 // 初始化节点编号
          let prev_obj = {} // 初始化抓出另一个目标点的元素对象
          let prev_point = 0 // 初始化另一个节点编号
          this.distanceList.forEach(el => {
            if (el.lng == nodeLnglat[0] && el.lat == nodeLnglat[1]) {
              node_obj = el
            }
            if (el.lng == prevLnglat[0] && el.lat == prevLnglat[1]) {
              prev_obj = el
            }
          })

          // 试图抓出2个点中是否包含 GJ 的 标题(tag) 字段
          let node_i = node_obj.tag.indexOf('GJ')
          let prev_i = prev_obj.tag.indexOf('GJ')

          // 初始化 GJ 回显变量
          let lineGJ = {}
          if (node_i > -1 && prev_i == -1) {
            lineGJ.tag = node_obj.tag
            lineGJ.point = node_obj.id
          }
          if (node_i == -1 && prev_i > -1) {
            lineGJ.tag = prev_obj.tag
            lineGJ.point = prev_obj.id
          }

          // 只有在 lineGJ 无值的情况下才赋值,因为在选着多条线段的时候会重赋值
          if (!this.lineStart.tag) {
            this.lineStart = lineGJ
          }
          // 抓到两个 GJ 的情况
          if (node_i > -1 && prev_i > -1) {
          }
          // 未抓到 GJ 的情况
          if (node_i == -1 && prev_i == -1) {
          }

          // 试图抓出2个点中是否包含 JTH 的 标题(tag) 字段
          let node_i_jth = node_obj.tag.indexOf('JTH')
          let prev_i_jth = prev_obj.tag.indexOf('JTH')

          // 判断起始点是否抓到了 GJ 如果抓到了 GJ 的情况下 JTH 就是终点,如果没有抓到 GJ 的情况下 JTH 就是起点
          // 初始化接头盒
          let lineJTH = {}
          if (node_i_jth > -1 && prev_i_jth == -1) {
            lineJTH.tag = node_obj.tag
            lineJTH.point = node_obj.id
          }
          if (node_i_jth == -1 && prev_i_jth > -1) {
            lineJTH.tag = prev_obj.tag
            lineJTH.point = prev_obj.id
          }
          if (this.lineStart.tag) {
            this.lineEnd = lineJTH
          } else {
            this.lineStart = lineJTH
            console.log('TCL: handleAddLine -> this.lineStart', this.lineStart)
          }

          // 试图抓出2个点中是否包含 GF 的 标题(tag) 字段
          let node_i_gf = node_obj.tag.indexOf('GF')
          let prev_i_gf = prev_obj.tag.indexOf('GF')

          // 初始化 GF 回显变量
          let lineGF = {}
          if (node_i_gf > -1 && prev_i_gf == -1) {
            lineGF.tag = node_obj.tag
            lineGF.point = node_obj.id
          }
          if (node_i_gf == -1 && prev_i_gf > -1) {
            lineGF.tag = prev_obj.tag
            lineGF.point = prev_obj.id
          }
          if (
            this.lineStart.tag &&
            this.lineStart.tag.indexOf('JTH') > -1 &&
            lineGF.tag
          ) {
            this.lineEnd = lineGF
          }
          if (
            this.lineStart.tag &&
            this.lineStart.tag.indexOf('GJ') > -1 &&
            lineGF.tag
          ) {
            this.lineEnd = lineGF
          }
          console.log(this.lineStart, this.lineEnd)

          // 抓到两个 GF 的情况
          if (node_i_gf > -1 && prev_i_gf > -1) {
          }
          // 未抓到 GF 的情况
          if (node_i_gf == -1 && prev_i_gf == -1) {
          }
        })
        // 测距信息框注册的右键点击事件
        text.on('rightclick', () => {
          let lnglat = [textPos.lng, textPos.lat]
          this.lineList.forEach((el, index) => {
            if (el.lnglat[0] == lnglat[0] && el.lnglat[1] == lnglat[1]) {
              this.lineList.splice(index, 1)
            }
          })
        })

        // 将折线添加至地图实例
        this.amap.add(this.polyline)
        // 一次只绘制2个点的线段,所以清空数组
        this.path = []
      }
    },
    /**
     * 查看总工作量的方法
     * @method handleShowAllTable
     * @author liump
     */
    handleShowAllTable() {
      // 查看总工作量表格的显示,表格结构构建
      this.showAmapAllTable = !this.showAmapAllTable
      this.$refs.childAllTable.handleChoiceLine(this.lineTableData)
      this.$refs.childAllTable.handleChoiceEquipment(this.equipmentTableData)
      this.$refs.childAllTable.handleChoiceMelt(this.meltTableData)
    },
    /**
     * 上传数据的方法
     * @method handleUpdateData
     * @date 2019年6月17日15:06:34
     * @author liump
     */
    handleUpdateData() {
      // 初始化数据
      let data = {
        details: [],
        points: this.distanceList,
        pro_id: this.pro_id
      }

      let details = this.lineTableData.concat(
        this.equipmentTableData,
        this.meltTableData
      )
      data.details = details

      // 上传接口
      let success = res => {
        res = res.data
        if (res.flag == 1) {
          // 成功提示
          this.$notify({
            title: '成功',
            message: '数据保存成功!',
            type: 'success'
          })
          // 通知子组件隐藏按钮
          // this.$refs.childAllTable.handleShowUpdateBtn(false)
          // 跳转到概运算
          this.$router.push('/budget/makeBudget')
        }
      }

      let param = {
        url: '/api/web/proWorkSubmit/pro/budget/work/submit',
        methods: 'post',
        data,
        success
      }

      // 当项目名字为评估绘图的时候出现建项弹框,当项目名字不为评估绘图的时候视为一般项目上传数据
      if (this.pro_name == '评估绘图') {
        this.$refs.childAssessment.handleShowDialog()
      } else {
        this.$confirm('请您确认信息后选择是否上传数据.', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
          .then(() => {
            // TODO: 上传数据
            console.log(JSON.stringify(data))
            this.$https(param)
          })
          .catch(() => {
            // cancel
          })
      }
    },
    /**
     * 项目列表,设置选中行方法
     * @method setCurrentPro
     * @author liump
     * @param { Object } row 列表的当前行
     */
    setCurrentPro(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    /**
     * 项目列表,更改序号
     * @method getProListIndex
     * @author liump
     */
    getProListIndex(index) {
      return index
    },
    /**
     * 项目列表选中触发事件
     */
    handleCurrentChangePro(val) {
      this.currentRow = val
    },
    /**
     * 该方法用于push数据
     */
    updateData(lnglats, id, prev) {
      this.distanceList.push({
        id: id,
        prev: prev,
        lng: lnglats[0],
        lat: lnglats[1],
        distance: 0,
        tag: '',
        tagType: '',
        pointType: ''
      })

      this.prev = this.id
      this.id++
      if (this.distanceList.length > 1) {
        this.handleDistance()
      }
    },
    /**
     * 该方法是测距方法
     * @method handleDistance
     * @author liump
     */
    handleDistance() {
      // 测距
      let len = this.distanceList.length
      for (let i = 0; i < this.distanceList.length; i++) {
        let el = this.distanceList[i]
        // 对每个节点测距
        let distance = 0
        // 找到当前节点及上一个节点的经纬度
        let node = el.id // 当前节点编号
        let prevNode = el.prev // 上一个节点编号
        let nodeLnglat = [el.lng, el.lat] // 当前节点经纬度
        let prevLnglat // 上一个节点经纬度
        if (prevNode == 0) {
          continue
        }
        prevLnglat = [
          this.distanceList[prevNode - 1].lng,
          this.distanceList[prevNode - 1].lat
        ]
        let lnglat1 = new AMap.LngLat(...nodeLnglat)
        let lnglat2 = new AMap.LngLat(...prevLnglat)
        //计算lnglat1到lnglat2之间的实际距离(m)
        let dt = lnglat1.distance(lnglat2)
        // dt = parseFloat(dt.toFixed(0));
        dt = parseInt(dt)
        el.distance = dt
      }
    },
    /**
     * 该方法用于获取搜索框数据,根据查找的经纬度转到地图位置
     * @method handleSearch
     * @author liump
     */
    handleSearch() {
      // 如果是用的中文逗号强制转换成英文逗号
      this.formSearchLnglat.searchText = this.formSearchLnglat.searchText.replace(
        '，',
        ','
      )
      let index = this.formSearchLnglat.searchText.indexOf(',')
      // 如果是经纬度必须逗号隔开
      if (index != -1) {
        this.setAMapLnglat = this.formSearchLnglat.searchText.split(',')
        if (this.setAMapLnglat[1]) {
          this.amap.setCenter(this.setAMapLnglat)
          let marker = new AMap.Marker({
            position: this.setAMapLnglat
          })
          marker.setMap(this.amap)
        } else {
          this.$alert(
            '请输入正确的经纬度,例如: 经度,纬度(中间用逗号隔开)',
            '提示',
            {
              confirmButtonText: '确定',
              callback: () => {
                this.formSearchLnglat.searchText = ''
              }
            }
          )
        }
      } else {
        // 如果没有找到","那么视为输入的地址
        let address = {
          address: this.formSearchLnglat.searchText
        }
        let suCb = res => {
          res = res.data
          // res.message 内容为 lnglat
          if (res.flag == 1) {
            if (res.message != null) {
              let lnglat = res.message.split(',')
              let lng = parseFloat(lnglat[0])
              let lat = parseFloat(lnglat[1])
              lnglat = [lng, lat]
              this.amap.setCenter(lnglat)
              this.amap.setZoom(16)
            }
          }
        }
        let erCb = res => {
          // console.log(res);
        }
        // 调用接口获取经纬度
        let params = {
          url: '/api/web/proMapWorkDetail/getLonLat',
          methods: 'post',
          data: address,
          success: suCb,
          error: erCb
        }
        this.$https(params)
      }
    },
    /**
     * 该方法用于关闭第一次开启地图时候的选择项目菜单
     * @method createMenuConfirm
     * @author liump
     */
    createMenuConfirm() {
      this.showCreateMenu = false
      this.handleChangeTools(0)
      // 根据后端传来的经纬度实现地图跳转到指定位置
      if (this.setAMapLnglat[0]) {
        this.amap.setCenter(this.setAMapLnglat)
      }
    },
    /**
     * 获取项目列表的方法
     * @method getProList
     * @author liump
     */
    getProList() {
      // /api/web/proProject/selectByBugect
      // 成功
      let suCb = res => {
        res = res.data
        if (res.flag == 1) {
          let data = res.data

          data.forEach(el => {
            let obj = {}
            obj.pro_id = el.proId
            obj.pro_name = el.proName
            obj.pro_num = el.proNo
            obj.pro_lnglat = el.proLng + ',' + el.proLat
            obj.pro_lng = el.proLng
            obj.pro_lat = el.proLat
            this.proData.push(obj)
          })
        }
      }
      // 失败
      let erCb = res => {}

      let param = {
        url: '/api/web/proProject/selectByBugect',
        methods: 'post',
        data: '',
        success: suCb,
        error: erCb
      }
      this.$https(param)
    },
    /**
     * 列表其中一项选定时触发的方法
     * @method getProId
     * @author liump
     * @params { Object } row 当前行
     */
    getProId(row) {
      this.pro_id = row.pro_id
      this.pro_name = row.pro_name
      this.setAMapLnglat = [row.pro_lng, row.pro_lat]
    },
    /**
     * 管道安装 弹框子组件传值触发父组件方法(确认)
     * @method handlePipelineWorkConfirm
     * @author liump
     * @param data 传递的数据对象
     */
    handlePipelineWorkConfirm(data) {
      // console.log("TCL: handlePipelineWorkConfirm -> data", data)
      // 是否确认
      this.pipelineDialogConfirm = data.confirm
      // 工作内容
      this.pipelineWork_list = data.pipelineWork_list
      // 图片类型判断
      this.img_type = data.img_type
      // 是否显示弹框
      this.showAmapPipeline = data.show
      // 当前节点编号
      let point_code = data.point_id

      // 添加到数组中
      // 初始化管道数据
      let pipelineInit = () => {
        let obj = {}
        obj.at_point = 0 // 操作点,垂直使用(点操作必须)
        obj.start_point = 0 // 操作点,水平使用(点操作为0)
        obj.end_point = 0 // 操作点,水平使用(点操作为0)
        obj.work_direction = 1 // 工作方向,0水平/1垂直(点操作为垂直)
        obj.work_length = 0 // 工作长度
        obj.work_option = '' // 工作内容最后一级的 optionId
        obj.work_type = 1 // 工作类型,1管道,2光缆,3设备,4熔纤
        obj.workload = 1 // 数量
        return obj
      }

      // 对子组件传递过来的数据处理
      data.pipelineWork_list.forEach(el => {
        //  管道传递到父组件 遍历数组吧子组件传递过来的数据经过处理放入管道数组中
        let obj = pipelineInit()

        // 获取 optionId
        let optionId = el.optionId[el.optionId.length - 1]
        if (optionId) {
          obj.work_option = optionId + ''
        } else {
          obj.work_option = ''
        }

        // 获取节点编号
        obj.at_point = point_code
        // 表格渲染数据(线程/操作点)
        obj.node = point_code
        // 表格渲染数据(操作方式)
        obj.type = '垂直'
        // 表格渲染数据(工作内容)
        obj.workMessage = el.workMessage.join(' | ')

        // 处理测距数据
        if (el.len) {
          obj.distance = parseInt(el.len)
          obj.work_length = parseInt(el.len)
        } else {
          obj.distance = 0
          obj.work_length = 0
        }

        // 处理数量数据
        if (el.num) {
          obj.num = parseInt(el.num)
          obj.workload = parseInt(el.num)
        } else {
          obj.num = 1
          obj.workload = 1
        }

        // 将数据 push 入管道数组中
        this.changePipelineTableData.push(obj)
      })
      // console.log("TCL: handlePipelineWorkConfirm -> this.changePipelineTableData", this.changePipelineTableData)

      // 添加到管道数组,添加到显示管道数据的表格数组
      // this.changePipelineTableData.push(obj);
      // this.pipelineTableData = this.changePipelineTableData;
    },
    /**
     * 管道安装 弹框子组件传值触发父组件方法(取消)
     * @param data 传递的数据对象
     */
    handlePipelineWorkCancel(data) {
      // console.log(data)
      this.pipelineDialogConfirm = data.confirm
      this.showAmapPipeline = data.show
    },
    /**
     * 线路 弹框子组件传值触发父组件方法(确认)
     * @param data 传递的数据对象
     */
    handleLineWorkConfirm(data) {
      // 是否确认
      this.lineDialogConfirm = data.confirm
      // optionId/workMessage 的数据集合
      this.lineWork_list = data.lineWork_list
      // 图片类型
      this.img_type = data.img_type
      // 是否显示弹框
      this.showAmapLine = data.show
      // 当前节点编号
      let point_code = data.point_id
      // tag 根据类型确定图标标题
      let tag = ''
      // 添加类型,用于熔纤工作内容的时候判断,当熔纤工作内容弹框触发时判断,如果是 GJ GF JTH 触发成端,如果不是就触发熔接
      let tagType = ''
      // 根据图片类型确定编号
      switch (this.img_type) {
        case 'D-OGJ':
          this.gj_index++
          if (this.gj_index < 10) {
            this.gj_index = `0${this.gj_index}`
          }
          tag = `GJ${this.gj_index}`
          tagType = 'GJ'
          break
        case 'D-NGJ':
          this.gj_index++
          if (this.gj_index < 10) {
            this.gj_index = `0${this.gj_index}`
          }
          tag = `GJ${this.gj_index}`
          tagType = 'GJ'
          break
        case 'D-OGF':
          this.gf_index++
          if (this.gf_index < 10) {
            this.gf_index = `0${this.gf_index}`
          }
          tag = `GF${this.gf_index}`
          tagType = 'GF'
          break
        case 'D-NGF':
          this.gf_index++
          if (this.gf_index < 10) {
            this.gf_index = `0${this.gf_index}`
          }
          tag = `GF${this.gf_index}`
          tagType = 'GF'
          break
        case 'W-JTH':
          this.jth_index++
          if (this.jth_index < 10) {
            this.jth_index = `0${this.jth_index}`
          }
          tag = `JTH${this.jth_index}`
          tagType = 'JTH'
          break
        case 'W-PN':
          tag = '盘留'
          break
        case 'W-YS':
          this.ys_index++
          if (this.ys_index < 10) {
            this.ys_index = `0${this.ys_index}`
          }
          tag = `YS${this.ys_index}`
          tagType = 'YS'
          break
        case 'W-YX':
          this.yx_index++
          if (this.yx_index < 10) {
            this.yx_index = `0${this.yx_index}`
          }
          tag = `YX${this.yx_index}`
          tagType = 'YX'
          break
        case 'W-NQBJG':
          this.qbjg_index++
          if (this.qbjg_index < 10) {
            this.qbjg_index = `0${this.qbjg_index}`
          }
          tag = `JG${this.qbjg_index}`
          tagType = 'JG'
          break
        case 'W-OQBJG':
          this.qbjg_index++
          if (this.qbjg_index < 10) {
            this.qbjg_index = `0${this.qbjg_index}`
          }
          tag = `JG${this.qbjg_index}`
          tagType = 'JG'
          break
        default:
          break
      }
      // 获取经纬度
      let lnglat = ''
      // 对图标标题赋值
      // 根据节点编号找到指定的点标记,添加字段tag,pointType(this.img_type)
      this.distanceList.forEach(el => {
        if (el.id == point_code) {
          el.tag = tag
          el.tagType = tagType
          el.pointType = data.img_type
          lnglat = `${el.lng},${el.lat}`
        }
      })

      // 线路传递到父组件
      // 初始化线路数据
      let lineInit = () => {
        let obj = {}
        obj.at_point = 0 // 操作点,垂直使用(点操作必须)
        obj.start_point = 0 // 操作点,水平使用(点操作为0)
        obj.end_point = 0 // 操作点,水平使用(点操作为0)
        obj.work_direction = 1 // 工作方向,0水平/1垂直(点操作为垂直)
        obj.work_length = 0 // 工作长度
        obj.work_option = '' // 工作内容最后一级的 optionId
        obj.work_type = 2 // 工作类型,1管道,2光缆,3设备,4熔纤
        obj.workload = 1 // 数量
        obj.line = '' // 线程/操作点渲染及接口参数
        obj.equipment_point = '' // 设备点,熔纤使用

        obj.lnglat = lnglat
        return obj
      }
      // 对子组件传递过来的数据处理
      data.lineWork_list.forEach(el => {
        // 线路传递到父组件 遍历数组吧子组件传递过来的数据经过处理放入管道数组中
        let obj = lineInit()

        // 获取 optionId
        let optionId = el.optionId[el.optionId.length - 1]
        if (optionId) {
          obj.work_option = optionId + ''
        } else {
          obj.work_option = ''
        }

        // 获取节点编号
        obj.at_point = point_code
        // 表格渲染数据(线程/操作点)
        obj.line = tag
        if (obj.line === '盘留') {
          obj.work_option = '255'
        }
        // 表格渲染数据(操作方式)
        obj.type = '垂直'
        // 表格渲染数据(工作内容)
        obj.workMessage = el.workMessage.join(' | ')
        // 表格渲染数据(单位)
        obj.unit = el.unit[0]

        // 处理长度数据
        obj.work_length = parseFloat(el.len)

        obj.tableShowNum = el.tableShowNum

        // 处理数量数据
        obj.num = parseInt(el.num)
        obj.workload = parseInt(el.num)

        this.lineTableData.push(obj)
      })
    },
    /**
     * 线路 弹框子组件传值触发父组件方法(取消)
     * @method handleLineWorkCancel
     * @param { Object } data 传递的数据对象
     */
    handleLineWorkCancel(data) {
      // console.log(data)
      this.lineDialogConfirm = data.confirm
      this.showAmapLine = data.show
    },
    /**
     * 线路工作内容表格的添加工作内容(光缆)弹框的确认按钮
     * @method handleLineAddWorkConfirm
     * @param { Object } data 传递的数据对象
     */
    handleLineAddWorkConfirm(data) {
      this.lineTableData.push(data)
      this.showAmapLineAddWork = false
      // 确认后清空数据
      this.lineStart = { tag: '', point: '' }
      this.lineEnd = { tag: '', point: '' }
      this.lineList = []
    },
    /**
     * 线路工作内容表格的添加工作内容(光缆)弹框的取消按钮
     * @method handleLineAddWorkCancel
     * @param { Boolean } bool 传递的数据对象
     */
    handleLineAddWorkCancel(bool) {
      this.showAmapLineAddWork = bool
      // 清空数据
      this.lineStart = { tag: '', point: '' }
      this.lineEnd = { tag: '', point: '' }
      this.lineList = []
    },
    /**
     * 子组件传递过来 index,用于删除表格行的方法
     * @method handleSpliceLineWork
     * @param { Number } index 表格数组的序列,用于删除行
     */
    handleSpliceLineWork(index) {
      this.lineTableData.splice(index, 1)
    },
    /**
     * 子组件通知父组件显示光缆工作内容弹框的方法
     * @method handleShowLineAddWork
     */
    handleShowLineAddWork() {
      // 显示弹框
      this.showAmapLineAddWork = true
      // 线程数据处理
      let list = []
      this.distanceList.forEach(el => {
        if (el.tag && el.tag != '盘留') {
          list.push({
            point: el.id,
            tag: el.tag,
            lnglat: [el.lng, el.lat]
          })
        }
      })
      console.log('TCL: handleShowLineAddWork -> list', list)
      this.$refs.childLineAddWork.handleUpdateList(list)
      // 清空数据
      this.lineStart = { tag: '', point: '' }
      this.lineEnd = { tag: '', point: '' }
      this.lineList = []
    },
    /**
     * 设备 操作点弹框的确认方法
     * @method handleEquipmentWorkConfirm
     * @author liump
     * @param { Array } data 传递过来的数组
     */
    handleEquipmentWorkConfirm(data) {
      this.equipmentTableData = this.equipmentTableData.concat(data)
      this.showAmapEquipment = false
    },
    /**
     * 设备 操作点弹框的取消方法
     * @method handleEquipmentWorkCancel
     * @author liump
     */
    handleEquipmentWorkCancel() {
      this.showAmapEquipment = false
    },
    /**
     * 设备 子组件通知父组件删除数据
     * @method handleDeleteEquipmentData
     * @author liump
     * @param { Number } index 行序列,用于删除数据
     */
    handleDeleteEquipmentData(index) {
      this.equipmentTableData.splice(index, 1)
    },
    /**
     * 熔纤 弹框子组件传值触发父组件方法(确认)
     * @method handleMeltWorkConfirm
     * @param { Object } data 传递的数据对象
     */
    handleMeltWorkConfirm(data) {
      this.meltTableData.push(data)
      this.showAmapMelt = false
    },
    /**
     * 熔纤 弹框子组件传值触发父组件方法(取消)
     * @param data 传递的数据对象
     */
    handleMeltWorkCancel(data) {
      this.showAmapMelt = false
    },
    /**
     *
     */
    handleDeleteMeltData(index) {
      this.meltTableData.splice(index, 1)
    },
    /**
      卫星图层切换控制
      @method handleChoiceLayer
      @author liump
      @date 2019年6月19日14:40:52
     */
    handleChoiceLayer() {
      this.showLayer = !this.showLayer
      if (this.showLayer) {
        this.satelliteLayer.show()
      } else {
        this.satelliteLayer.hide()
      }
    }
  }
}
</script>

<style scoped>
/* 组件宽度 */
.amap {
  width: 1100px;
  margin: 20px auto 0;
}
.cursor_white {
  cursor: url('/static/amap/crosshair_white.cur'), crosshair;
}
.cursor_red {
  cursor: url('/static/amap/crosshair.cur'), crosshair;
}
/* 头部样式 */
.header {
  width: 100%;
  height: 48px;
  background: #f3f3f3;
  border: 1px solid #e4e4e4;
  border-bottom: 2px solid rgba(181, 224, 254);
}
.h-common {
  width: 112px;
  height: 28px;
  line-height: 28px;
  margin-left: 20px;
  margin-top: 8px;
  font-size: 14px;
  text-align: left;
  float: left;
}
.h-pro-name {
  margin-left: 20px;
  margin-top: 14px;
  font-size: 14px;
  text-align: left;
  float: left;
}
.h-content {
  width: 400px;
  height: 29px;
  line-height: 29px;
  float: right;
  margin-top: 7px;
  font-size: 12px;
  display: flex;
  margin-right: 32px;
  border: 1px solid rgba(215, 215, 215, 1);
  cursor: pointer;
}
.h-title {
  width: 80px;
  height: 29px;
  line-height: 29px;
  background: #fff;
  border-right: 1px solid rgba(215, 215, 215, 1);
}
.h-title:last-child {
  border-right: 0;
}
.active {
  background: #1abc9c;
  color: #fff;
}
/* 主体样式,地图,搜索框 */
.main {
  widows: 100%;
  height: 500px;
  position: relative;
}
#amap {
  position: absolute;
  width: 100%;
  height: 500px;
}
.search {
  position: absolute;
  z-index: 100;
  top: 30px;
  left: 200px;
  height: 20px;
  display: flex;
}
/* 创建项目按钮 */
.create-pro {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 96px;
  height: 32px;
  color: #fff;
  background: rgba(59, 177, 156, 1);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create-pro img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
}
.create-pro span {
  width: 52px;
  height: 16px;
  font-size: 13px;
  display: inline-block;
}
.create-menu {
  width: 600px;
  background: #fff;
  box-shadow: 2px 2px 2px #eee;
  z-index: 200;
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  margin: auto;
}
.create-menu-header {
  width: 100%;
  height: 50px;
  background: #f2f2f2;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.create-menu-header div {
  margin-left: 22px;
  font-weight: 700;
}
.create-menu-header img {
  width: 14px;
  height: 14px;
  margin-right: 25px;
  cursor: pointer;
}
/* 创建信息弹框主体 */
.menu-main-content {
  background: #fff;
  margin: -1px auto 0;
  font-size: 12px;
}
.menu-main-content label {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.menu-main-header div {
  border: 1px solid transparent;
  border-right-color: #e4e4e4;
}
.menu-main-header div:first-child {
  width: 35px;
}
.menu-main-header div:nth-child(2) {
  width: 108px;
}
.menu-main-header div:nth-child(3) {
  width: 106px;
}
.menu-main-header div:nth-child(4) {
  width: 142px;
}
.menu-main-header div:nth-child(5) {
  width: 155px;
  border: 0;
}
.create-menu-footer {
  margin: 20px auto;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.clearfix span {
  float: left;
}
/* 查看总工作量 */
.showAllTableData {
  z-index: 100;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.choiceLayer {
  z-index: 100;
  position: absolute;
  top: 20px;
  right: 20px;
}
/* 地图table 信息列表 */
.amap-table {
  width: 1030px;
  margin: 20px auto 0;
}
.amap-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.amap-all-table-header {
  display: flex;
}
.amap-all-table-btn {
  width: 120px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  border: 1px solid #e4e4e4;
}
.amap-all-table-btn:not(:first-child) {
  margin-left: 20px;
}
.amap-all-table-btn-active {
  background: #1abc9c;
  color: #fff;
}
.amap-table-addWork {
  display: flex;
  justify-content: center;
  align-items: center;
}
.amap-table-content {
  margin-top: 20px;
}
.amap-table-content .table-content-delete {
  text-decoration: underline;
  color: #1abc9c;
  cursor: pointer;
}
</style>

<!-- 在全局中修改地图的css -->
<style>
.component-amap .el-card__header {
  background: #f2f2f2;
  padding: 6px 20px;
  line-height: 23px;
}
.component-amap .marker-amap {
  position: relative;
  width: 30px;
  height: 30px;
}

.component-amap .marker-amap img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.component-amap .marker-amap div:nth-child(2) {
  height: 20px;
  padding: 3px 6px;
  position: absolute;
  color: #ff0036;
  left: -10px;
  top: -30px;
}
.component-amap .marker-amap div:nth-child(3) {
  height: 20px;
  line-height: 20px;
  padding: 3px 6px;
  position: absolute;
  color: #ff0036;
  font-size: 12px;
  left: 20px;
  top: 20px;
}
.component-amap .el-dialog__header,
.component-amap .el-dialog__body {
  text-align: left;
}
.component-amap .el-button--primary:hover {
  color: #fff;
}

/* 气泡框 */
.component-amap .amap-info-contentContainer > div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.component-amap .amap-info-contentContainer > div:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: red;
  bottom: -16px;
  left: 91px;
}
</style>

